<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="分站名称">
                    <a-input placeholder="请输入分站名称" v-model="queryParam.agentName"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label=" 区 域 ：">
                    <a-input placeholder="请输入区域" v-model="queryParam.areaName" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->
          <!-- 操作按钮区域 -->
          <div class="table-operator" style="text-align: right;">
            <a-button @click="syncSiteAreaData" type="primary">全量拉取数据（一次性拉取所有分站的区域）<a-icon type="logout" /></a-button>
          </div>
          <!-- table区域-begin -->
          <div>
            <a-table ref="table" size="middle" :scroll="{x:true}" bordered :rowKey="(record,index)=>{return index}" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
              @change="handleTableChange">
            </a-table>
          </div>

        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="分站名称">
                    <a-input placeholder="请输入分站名称" v-model="siteQueryParam.siteName"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label=" 区 域 ：">
                    <a-input placeholder="请输入区域" v-model="siteQueryParam.areaName" />
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="siteAreaSearchQuery" icon="siteSearch">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 操作按钮区域 -->
          <div class="table-operator" style="text-align: left;">
            <a-button @click="syncSiteAreaDataBySiteId" type="primary">指定分站进行区域数据拉取<a-icon type="login" /></a-button>
            注意：”指定分站进行区域数据拉取“需要输入下表中的<span style='color: red;'>分站id</span>和<span style='color: red;'>分站名称</span>
          </div>
          <!-- table区域-begin -->
          <!--            -->
          <div>
            <a-table ref="siteTable" size="middle" :scroll="{x:true}" bordered :rowKey="(record,index)=>{return index}" :columns="siteColumns" :dataSource="siteAreaData" :pagination="sitePagination" :loading="siteLoading" class="j-table-force-nowrap"
              @change="handleSiteTableChange">
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal :title="modal.modalTitle" :visible="modal.siteTransferFlag" :confirm-loading="modal.confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
      <p>{{ modal.modalText }}</p>
      <div style='color:red;'>{{modal.modalTextDown}}</div>
    </a-modal>

    <a-modal :title="modal.forSiteId.modalTitle" :visible="modal.forSiteId.visibleFlag" @cancel="handleForSiteIdCancel" cancelText='取消' okText='确定迁移该分站的区域信息' @ok="handleForSiteIdOk" :confirm-loading="modal.forSiteId.okLoading">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-row style="text-align: center;">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" style='margin-bottom: 15px;'>
            <span style='font-size: 18px;'>请选择<span style="color:red;">”闯王吉他“</span>分站信息</span>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :xl="24" :lg="24" :md="24" :sm="24">
            <a-form-item label="分站">
              <a-select show-search placeholder="请选择分站" option-filter-prop="children" :filter-option="filterSelectOption" @focus="handleSelectFocus" @blur="handleSelectBlur" @change="handleSelectChange" allowClear
                v-model="modal.forSiteId.selectValue.siteId">
                <a-select-option v-for="(sd,roleindex) in sitesData" :key="sd.id" :value="sd.id">
                  {{ sd.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="分站ID">
              <a-input placeholder="分站ID" :disabled="true" v-model="modal.forSiteId.transferParam.siteId"></a-input>
            </a-form-item>
            <a-form-item label="分站名称">
              <a-input placeholder="分站名称" :disabled="true" v-model="modal.forSiteId.transferParam.siteName"></a-input>
            </a-form-item>
            <div style="font-size: 16px;font-weight: bolder;color:red; text-align: center;">
              {{modal.forSiteId.tipText}}
            </div>
            <div>说明：<br />
              <span style="margin-left: 15px;">1、分站ID、分站名称 不可编辑；</span><br />
              <span style="margin-left: 15px;">2、选择分站之后，分站ID和分站名称会自动填充为所选择的分站信息；</span><br />
              <span style="margin-left: 15px;">3、点击“确定迁移该分站的区域信息”按钮，系统将会从“曹操跑腿”系统中拉取的所选择的分站区域信息到“闯王吉他”！</span>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'SiteAreaList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {

  },
  data() {
    return {
      description: '分站关联区域数据迁移列表',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          fixed: true,
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '代理商ID',
          align: "center",
          dataIndex: 'agentSid',
          fixed: true,
          width: 50
        },
        {
          title: '代理商名称',
          align: "center",
          dataIndex: 'agentName',
          fixed: true,
          width: 50,
        },
        {
          title: "”曹操跑腿”系统内代理商（分站）关联的区域数据",
          children: [

            {
              title: '省编码',
              align: "center",
              dataIndex: 'provinceAdcode',
              width: "50px"
            },
            {
              title: '省名称',
              align: "center",
              dataIndex: 'provinceName',
              width: "50px"
            },
            {
              title: '省中心点',
              align: "center",
              dataIndex: 'provinceCenter',
              width: "50px"
            },
            {
              title: '市编码',
              align: "center",
              dataIndex: 'cityAdcode',
              width: "50px"
            },
            {
              title: '市名称',
              align: "center",
              dataIndex: 'cityName',
              width: "50px"
            },
            {
              title: '市中心点',
              align: "center",
              dataIndex: 'cityCenter',
              width: "50px"
            },
            {
              title: '县/区/县级市编码',
              align: "center",
              dataIndex: 'districtAdcode',
              width: "50px"
            },
            {
              title: '县/区/县级市名称',
              align: "center",
              dataIndex: 'districtName',
              width: "50px"
            },
            {
              title: '县/区/县级市中心点',
              align: "center",
              dataIndex: 'districtCenter',
              width: "50px"
            },
            {
              title: '乡镇编码',
              align: "center",
              dataIndex: 'townAdcode',
              width: "50px"
            },
            {
              title: '乡镇名称',
              align: "center",
              dataIndex: 'townName',
              width: "50px"
            },
            {
              title: '乡镇中心点',
              align: "center",
              dataIndex: 'townCenter',
              width: "50px"
            }
          ]
        }
      ],
      modal: {
        modalTitle: '',
        siteTransferFlag: false,
        confirmLoading: false,
        modalText: '',
        modalTextDown: '',
        forSiteId: {
          visibleFlag: false,
          modalTitle: '',
          tipText: '',
          okLoading: false,
          selectValue: {
            siteId: '-1',
            siteName: ''
          },
          transferParam: {
            siteId: '-1',
            siteName: ''
          },

        }
      },
      // 右侧表头
      siteColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: "center",
          fixed: true,
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '分站id',
          align: "center",
          dataIndex: 'siteId',
          width: 50,
          fixed: true
        },
        {
          title: '分站名称',
          align: "center",
          dataIndex: 'siteName',
          width: 50,
          fixed: true
        },
        {
          title: "闯王吉他””系统内分站（代理商）关联区域表数据",
          children: [
            {
              title: '省编码',
              align: "center",
              dataIndex: 'provinceAdcode',
              width: "50px"
            },
            {
              title: '省名称',
              align: "center",
              dataIndex: 'provinceName',
              width: "50px"
            },
            {
              title: '省中心点',
              align: "center",
              dataIndex: 'provinceCenter',
              width: "50px"
            },
            {
              title: '市编码',
              align: "center",
              dataIndex: 'cityAdcode',
              width: "50px"
            },
            {
              title: '市名称',
              align: "center",
              dataIndex: 'cityName',
              width: "50px"
            },
            {
              title: '市中心点',
              align: "center",
              dataIndex: 'cityCenter',
              width: "50px"
            },
            {
              title: '县/区/县级市编码',
              align: "center",
              dataIndex: 'districtAdcode',
              width: "50px"
            },
            {
              title: '县/区/县级市名称',
              align: "center",
              dataIndex: 'districtName',
              width: "50px"
            },
            {
              title: '县/区/县级市中心点',
              align: "center",
              dataIndex: 'districtCenter',
              width: "50px"
            },
            {
              title: '乡镇编码',
              align: "center",
              dataIndex: 'townAdcode',
              width: "50px"
            },
            {
              title: '乡镇名称',
              align: "center",
              dataIndex: 'townName',
              width: "50px"
            },
            {
              title: '乡镇中心点',
              align: "center",
              dataIndex: 'townCenter',
              width: "50px"
            }
          ]
        }
      ],
      url: {
        list: "/dataTransfer/site/agentArea/list",
        siteAreaList: "/dataTransfer/site/siteArea/list",
        transfer: "/dataTransfer/site/siteArea/transfer",
        siteList: "/dataTransfer/site/siteList"

      },
      //   新库中的的数据集合
      siteAreaData: [],
      dictOptions: {},
      superFieldList: [],
      superSiteFieldList: [],
      siteQueryParam: {
        siteName: '',
        areaName: ''
      },
      sitePagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      siteLoading: false,
      // 分站数据
      sitesData: [],

    }
  },
  created() {
    this.getSiteAreaList();
    this.finfSiteList();
  },
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // },
  },
  methods: {
    initDictConfig() {
    },
    finfSiteList() {
      const self = this;
      self.$http.get(self.url.siteList, {
        params: {
          pageNo: 1,
          pageSize: 1000
        }
      }, {
        emulateJSON: true
      }).then(res => {
        if (res.success) {
          self.sitesData.push({ id: '-1', name: '--请选择分站--' });
          self.sitesData.push.apply(self.sitesData, res.result.records);
        }
      })
    },
    getSiteAreaList() {
      const self = this;
      self.siteQueryParam.pageNo = self.sitePagination.current;
      self.siteQueryParam.pageSize = self.sitePagination.pageSize;
      self.$http.get(self.url.siteAreaList, {
        params: self.siteQueryParam
      }).then(res => {
        if (res.success) {
          self.siteAreaData = res.result.records;
          self.sitePagination.total = res.result.total
        }
      })
    },
    handleSiteTableChange(pagination, filters, sorter) {
      this.sitePagination = pagination;
      this.siteLoading = true;
      this.getSiteAreaList();
      this.siteLoading = false;
    },
    syncSiteAreaData() {
      const self = this;
      self.modal.modalTitle = "分站区域迁移";
      self.modal.modalText = "确定要将代理商（分站）关联的区域信息同步至新库中的mk_site_area表中吗？ ";
      self.modal.modalTextDown = "注意：同步之前会无检测代理商（分站）区域信息";
      self.modal.confirmLoading = false;
      self.modal.siteTransferFlag = true;
    },
    syncDataing() {
      const self = this;
      self.$http.post(self.url.transfer, {}).then(res => {
        console.log("transfer---->   ", res)
        if (res.success) {
          self.modal.modalText = res.result + "代理商（分站）区域信息已全部同步至新库中的mk_site_area表中";
          self.modal.modalTextDown = "5秒钟后，将自动关闭，也可点击“确定”或“关闭”按钮手动关闭";
          self.getSiteAreaList();
          // 关闭对话框
          setTimeout(() => {
            self.modal.confirmLoading = false;
            self.modal.siteTransferFlag = false;
          }, 5000);
        }
      })
    },
    handleCancel(e) {
      this.modal.siteTransferFlag = false;
    },
    handleOk(e) {
      this.modal.confirmLoading = true;
      this.syncDataing();
    },
    siteAreaSearchQuery() {
      this.getSiteAreaList();
    },
    syncSiteAreaDataBySiteId() {
      this.modal.forSiteId.visibleFlag = true;
      this.modal.forSiteId.selectValue.siteId = "-1";
      this.modal.forSiteId.selectValue.siteName = "";
      this.modal.forSiteId.transferParam.siteName = "";
      this.modal.forSiteId.transferParam.siteId = "";
      this.modal.forSiteId.modalTitle = "指定分站进行区域数据迁移"
    },
    handleForSiteIdCancel() {
      this.modal.forSiteId.visibleFlag = false;
      this.modal.forSiteId.tipText = "";
      this.modal.forSiteId.okLoading = false;
    },
    handleForSiteIdOk() {
      // console.log("所选择的分站id："+this.modal.forSiteId.transferParam.siteId);
      // console.log("所选择的分站名称："+this.modal.forSiteId.transferParam.siteName);
      const self = this;
      const paramId = self.modal.forSiteId.transferParam.siteId;
      const paramName = self.modal.forSiteId.transferParam.siteName;
      if (!paramId || !paramName) {
        self.modal.forSiteId.tipText = "请先选择分站信息……"
        return;
      }
      self.modal.forSiteId.tipText = "正在迁移分站”" + self.modal.forSiteId.transferParam.siteName + "“的区域信息，请您稍候……"
      self.modal.forSiteId.okLoading = true;
      self.$http.post(self.url.transfer, {
        id: paramId,
        name: paramName
      }, {
        emulateJSON: true
      }).then(res => {
        console.log("transfer---->   ", res)
        if (res.success) {
          self.modal.forSiteId.okLoading = false;
          self.modal.forSiteId.tipText = "分站”" + paramName + "“的区域信息已迁移完成；如果需要迁移其它分站的区域信息请选择分站，不需要请手动关闭该对话框"
          self.getSiteAreaList();
          // // 关闭对话框
          // setTimeout(() => {
          //   // 处理信息
          // }, 5000);
        }
      })
    },
    // 分站下拉所用到的方法
    handleSelectChange(value, option) {
      if (!option) {
        this.modal.forSiteId.transferParam.siteName = this.modal.forSiteId.selectValue.siteName = "";
        this.modal.forSiteId.transferParam.siteId = this.modal.forSiteId.selectValue.siteId = "";
        return;
      }
      this.modal.forSiteId.selectValue.siteName = option.componentOptions.children[0].text.toLowerCase().replace("\n", "").trim()
      if (this.modal.forSiteId.selectValue.siteId == "-1") {
        this.modal.forSiteId.transferParam.siteId = "";
      } else {
        this.modal.forSiteId.transferParam.siteName = this.modal.forSiteId.selectValue.siteName;
        this.modal.forSiteId.transferParam.siteId = this.modal.forSiteId.selectValue.siteId;
      }
    },
    handleSelectBlur() {
      console.log('blur');
    },
    handleSelectFocus() {
      console.log('focus');
    },
    filterSelectOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>